<template>
    <div>
        <div ref="main" :style="{ width: props.width, height: props.height }"></div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps, computed } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    },
    chartsType: {
        type: String,
        default: 'bar'
    },
    option: {
        type: Object,
        default: () => ({
            legend: {
                top: 'bottom'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                        { value: 40, name: 'rose 1' },
                        { value: 38, name: 'rose 2' },
                        { value: 32, name: 'rose 3' },
                        { value: 30, name: 'rose 4' },
                        { value: 28, name: 'rose 5' },
                        { value: 26, name: 'rose 6' },
                        { value: 22, name: 'rose 7' },
                        { value: 18, name: 'rose 8' }
                    ]
                }
            ]
        })
    }
})
const data = reactive({
})
const main = ref(null)
onMounted(() => {
    initCharts()
})

function initCharts() {
    var myChart = echarts.init(main.value);
    myChart.setOption(props.option);
    // 图表响应式
    // window.addEventListener('resize', () => {
    //     myChart.resize()
    // })
    window.onresize = () => {
        myChart.resize()
        //如果有多个表变动在下方依次写下去就可以了
    }
}
</script>
  
<style scoped></style>
  